<!DOCTYPE HTML>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src='../../resources/gesture-util.js'></script>
<style>

body {
  height: 2000px;
  width: 2000px;
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 40px,
    #465298 40px,
    #465298 80px
  ) local;
}

#scroller {
  width: 90px;
  border: 2px solid black;
  height: 90px;
  position: absolute;
  top: 50px;
  overflow: auto;
  background: repeating-linear-gradient(
    135deg,
    #bc6d60,
    #bc6d60 40px,
    #985246 40px,
    #985246 80px
  ) local;
}

#contents {
  height: 200px;
}

</style>

<div id="scroller">
	<div id="contents"></div>
</div>

<script>

var scroller = document.getElementById('scroller');

promise_test(async () => {
  assert_equals(scroller.scrollTop, 0);
  await waitForCompositorCommit();
  await mouseClickOn(12, 60, 1);
  await mouseMoveTo(12, 260);
  await mouseClickOn(12, 260, 1);
  await waitFor(() => {
    return scroller.scrollTop > 0;
  }, "failed to scroll scroller vertically");
}, "Middle click autoscroll should scroll child if child delta can be consumed.");

promise_test(async () => {
  assert_equals(document.scrollingElement.scrollLeft, 0)
  await waitForCompositorCommit();
  await mouseClickOn(12, 60, 1);
  await mouseMoveTo(212, 60);
  await mouseClickOn(212, 60, 1);
  await waitFor(() => {
    return document.scrollingElement.scrollLeft > 0;
  }, "failed to scroll document body horizontally");
}, "Middle click autoscroll should scroll parent if child delta can not be consumed.");

</script>